<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-08 17:31:57
 * @Description: 
-->
<template>
  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
  <ElSubMenu
    v-if="menuHasChildren(item) && getShowMenu"
    :key="`submenu-${item.path}`"
    :index="item.path"
    :popper-class="prefixCls"
  >
    <template #title>
      <MenuItemContent :item="item" />
    </template>

    <template v-for="childrenItem in item.children || []" :key="childrenItem.path || childrenItem.id">
      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
    </template>
  </ElSubMenu>
</template>
<script lang="ts" setup>
  import { ElSubMenu } from 'element-plus';
  import type { Menu as MenuType } from '@/router/types';
  import { computed } from 'vue';
  import { itemProps } from '../props';
  import BasicMenuItem from './basic-menu-item.vue';
  import MenuItemContent from './menu-item-content.vue';
  import { getGlobalCls } from '@/utils/index';

  defineOptions({ name: 'BasicSubMenuItem', isSubMenu: true });

  const props = defineProps(itemProps);
  const { prefixCls } = getGlobalCls('basic-menu-sub-pop');
  const getShowMenu = computed(() => !props.item.meta?.hideMenu);
  function menuHasChildren(menuTreeItem: MenuType): boolean {
    return (
      !menuTreeItem.meta?.hideChildrenInMenu &&
      Reflect.has(menuTreeItem, 'children') &&
      !!menuTreeItem.children &&
      menuTreeItem.children.length > 0
    );
  }
</script>
